<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo18-vue-resource</title>
  <script src="./js/vue.min.js"></script>
  <script src="./js/vue-router.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/vue-resource.min.js"></script>
</head>

<body>

   <div id="app">
      请输入关键字:<input type="text" v-model="keyword" @keyup="sendJsonp(keyword)">
      <ul>
        <li v-for="r in result">{{r}}</li>
      </ul>
   </div>

</body>

<script type="application/javascript">
 const vm = new Vue({
   el: "#app",
   data: {
     keyword: '',
     result: ''
   },
   methods: {
     sendJsonp(keyword){
       let url =  'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';;
       this.$http.jsonp(url,{
         params: {
           wd: keyword
         },
         jsonp: 'cb' //jsonp默认是callback,百度缩写为cb,需要特别指定
       }).then(res=>{
         if(res.data.g){
           this.result = res.data.g.map(x=>x['q']);
         }else {
           this.result = [];
         }
       })
     }
   }
 });



</script>
</html>
